<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9.27作业</title>
    <link rel="stylesheet" href="./css/作业.css">
</head>

<body>
    <header>
        <img src="./作业/images/img3.jpg" alt="">
        <div class="yuan">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!-- 三个盒子 -->
        <div class="shz">
            <img src="./作业/images/banner1_bg.jpg" alt="">
            <img src="./作业/images/banner2_bg.jpg" alt="">
            <img src="./作业/images/banner3_bg.jpg" alt="">
            <!-- 第一段话 -->
            <div class="dyd">
                <h2>24/7 Client</h2>
                <h2>Support</h2>
                <p>This is one of free web- site templates created by TemplateMonster.com team.' This website template
                    is optimized for 1024X768 screen res.</p>
                <div>
                    <p><a href="">REAR MORE</a></p>
                </div>
            </div>
            <!-- 第二段话 -->
            <div class="ded">
                <h2>Premium </h2>
                <h2>Services</h2>
                <p>achtete beate wtae aicta sunt expic abo. Nemo enim lpsam vupalem quia vlupuas Ssenaa auoaul ugtset
                    totam rem aperiam eaque</p>
                <div>
                    <p><a href="">REAR MORE</a></p>
                </div>
            </div>
            <!-- 第三段话 -->
            <div class="dsd">
                <h2>Out </h2>
                <h2>Strategy</h2>
                <p>achtete beate wtae aicta sunt expic abo. Nemo enim lpsam vupalem quia vlupuas Ssenaa auoaul ugtset
                    totam rem aperiam eaque</p>
                <div>
                    <p><a href="">REAR MORE</a></p>
                </div>
            </div>
        </div>
        <h2 class="h2">Latest News & Events</h2>
        <section>
            <!-- 黑人 -->
            <div class="hr">
                <img src="./作业/images/page1_img1.jpg" alt="">
                <!-- 黑人文字 -->
                <div class="hrwz">
                    <h2>Sed ut perspiciatis unde omnis iste natus</h2>
                    <p>Dit voluptatem accusantium doloremque laudantium, totam remaperiam, eaque ipsa quae ab illo
                        inventore veritatis et quasiarchitecto beatae vitae dicta sunt explicabo. Nemo enim
                        ipsamvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sedquia consequuntur magni
                        dolores.</p>
                </div>
            </div>
            <!-- 两个人 -->
            <div class="lgr">
                <img src="./作业/images/page1_img2.jpg" alt="">
                <div class="lgrwz">
                    <h2>At vero eos et accusamus et iusto odio dignissimos</h2>
                    <p>Et harum quidem rerum facilis est et expedita distinctio. Namhylibero tempore, cum soluta nobis
                        est eligendi optio cumque nihilimpedit quo minus id quod maxime placeat facere possimus,omnis
                        voluptas assumenda est, omnis dolor repellendusemporibus autem quibusdam et aut officiis
                        debitis.</p>
                </div>
            </div>
        </section>
        <h2 class="h2">Our Seruices</h2>
        <div class="sz">
            <div class="zuo">
                <img src="./作业/images/page2_img1.png" alt="">
                <div class="ttwz">
                    <h3>MANGEMENT</h3>
                    <p>Nemo enim ipsam voluptate vuoluptas aspernaturaut odit aut fugit, sed quia consequuntur
                        magniMANGEMENT</p>
                </div>
            </div>
            <div class="you">
                <img src="./作业/images/page2_img2.png" alt="">
                <div class="szwz">
                    <h3>PLANNING</h3>
                    <p>Voluptatem accusantiumdoloremque laudantium,totam rem aperiam eaqueipsa quae ab illo inven
                    </p>
                </div>
            </div>
        </div>
        <img src="./作业/images/icon1.png" alt="" class="szxt">
        <img src="./作业/images/icon2.png" alt="" class="szxt">
        <img src="./作业/images/icon3.png" alt="" class="szxt">
    </header>
    <nav>
        <div>
            <!-- 黑背景 -->
            <img src="./作业/images/bg_top_img.jpg" alt="" class="bj">
            <!-- logo -->
            <img src="./作业/images/logo.png" alt="" class="logo">
            <!-- F图片 -->
            <img src="./作业/images/icon_1.png" alt="" class="F">
            <!-- wifi -->
            <img src="./作业/images/icon_2.png" alt="" class="wifi">
            <!-- 倒F -->
            <img src="./作业/images/icon_3.png" alt="" class="daof">
        </div>
    </nav>
    <aside>
        <div class="zuo">
            <h1>HOME</h1>
            <h1>NEWS</h1>
            <h1>SERVICES</h1>
            <h1>PRODUCTES</h1>
            <h1>FAQ</h1>
            <h1>CONTACT</h1>
        </div>
        <div class="youxwz">
            <h1>PRODUCTES</h1>
        </div>
        <!-- 右下网格 -->
        <div class="youxiawg">
            <div><img src="./作业/images/page3_img1.jpg" alt="">
                <h3>PRODUCTE #1</h3>
                <p>Namhy Libero Temporem Soluta Nobis</p>
            </div>
            <div><img src="./作业/images/page3_img2.jpg" alt="">
                <h3>PRODUCTE #2</h3>
                <p>Namhy Libero Temporem Soluta Nobis</p>
            </div>
            <div><img src="./作业/images/page3_img3.jpg" alt="">
                <h3>PRODUCTE #3</h3>
                <p>Namhy Libero Temporem Soluta Nobis</p>
            </div>
            <div><img src="./作业/images/page3_img4.jpg" alt="">
                <h3>PRODUCTE #4</h3>
                <p>Namhy Libero Temporem Soluta Nobis</p>
            </div>
            <div><img src="./作业/images/page3_img5.jpg" alt="">
                <h3>PRODUCTE #5</h3>
                <p>Namhy Libero Temporem Soluta Nobis</p>
            </div>
            <div><img src="./作业/images/page3_img6.jpg" alt="">
                <h3>PRODUCTE #6</h3>
                <p>Namhy Libero Temporem Soluta Nobis</p>
            </div>
        </div>
        <div class="Fren">
            <p>
            <h2>Frenquentiy Asked Question</h2>
            </p>
            <!-- 右下文字 -->
            <div class="youxiawz">
                <div class="yxdyd">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis
                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure
                        dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                </div>
                <div class="yxdyd">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                </div>
                <div class="yxdyd">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                </div>
                <div class="yxdyd">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
                </div>
                <div class="Contact"><h2>Contact</h2></div>
                <!-- 右下左边大盒子 -->
                <div class="dhz">
                    <p>your name:</p>
                    <p>your E-mail:</p>
                    <p>your city:</p>
                    <p>your message:</p>
                    <div class="name"></div>
                    <div class="E-mail"></div>
                    <div class="city"></div>
                    <div class="message"></div>
                    <div class="clj1"><p><a href="">CLEAR</a></p></div>
                    <div class="clj2"><p><a href="">SEND</a></p></div>
                </div>
                <!-- 右下右边大盒子 -->
                <div class="dhzy">
                    <div class="dhzlxhz">
                        <div class="xhzz">
                            <p>Country:</p>
                            <p>State</p>
                            <p>City</p>
                            <p>Email</p>
                        </div>
                        <div class="xhzy">
                            <p>USA</p>
                            <p>California</p>
                            <p>San Diego</p>
                            <a href="">lily@mail com</a>
                        </div>
                    </div>
                    <div class="dhzyx">
                        <h3>Miscellaneous Info:</h3>
                        <p>At vero eos et accusoaus
                            et iusto odio dignissimos
                            ducimus qui blanditiis
                            praesentium voluptatum
                            deleniti atque corrupti
                            quos dolores.
                            </p>
                    </div>
                </div>
            </div>
        </div>

    </aside>
    <footer>
        <div>
            <img src="./作业/images/footer_logo.jpg" alt="">
            <p><ins>Website template </ins>designed by TemplateMonster.com</p>
        </div>
    </footer>
</body>

</html>